<template>
    <scroll-view
        class="load-more-list"
        scroll-y
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="100"
        refresher-background="#F8F8F8"
        @scrolltolower="loadMoreLow"
        @refresherpulling="onPulling"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @refresherabort="onAbort"
    >
        <!-- 列表插槽 slot -->
        <view
            v-for="(item, index) in listData"
            :key="index"
        >
            <slot :row="item" />
        </view>
        <view v-if="listData.length > 0">
            <uni-load-more
                :status="loadStatus"
                :content-text="contentText"
                color="#6b6c6c"
            />
        </view>
        <view
            v-if="listData.length == 0"
            class="nodata"
        >
            <view class="nodata-text">
                {{ triggered === true ? '加载中' : noListText }}
            </view>
        </view>
    </scroll-view>
</template>

<script setup name="LoadMoreList">
    import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
    import { ref, reactive, onMounted, inject, toRefs, watch } from "vue";
    import { Toast } from '@/tools/util';

    const props = defineProps({
        /*
        配置项state：
            url: '',    // 接口请求url
            params: {}, // 接口查询参数（不包括分页参数）
            list: 'list',   // 接口返回数组集合
            noListText: '暂无数据',    // list为空时展示文本
            pageSize: 10,   // 默认分页长度
            pagination: {
                page: 'page',
                pageSize: 'pageSize'
            }
        */
        options: {
            type: Object,
            default: () => ({})
        }
    });

    const $api = inject("$api");

    let state = reactive({
        url: '',
        params: {},
        list: 'list',
        triggered: false,
        freshing: false,
        loadStatus: 'more',
        contentText: {
            contentdown: '查看更多',
            contentrefresh: '加载中',
            contentnomore: '没有更多了'
        },
        noListText: '暂无数据',
        listData: [],
        page: 1,
        pageSize: 10,
        pagination: {
            page: 'page',
            pageSize: 'pageSize'
        }
    });

    const {triggered, listData, loadStatus, contentText, noListText} = toRefs(state);

    watch(
        () => props.options,
        () => {
            state = Object.assign(state, props.options);
        }, {
            deep: true,
            immediate: true
        }
    );

    // 获取列表
    const getList = () => {
        let obj = {
            ...state.params,
        };
        obj[state.pagination.page] = state.page;
        obj[state.pagination.pageSize] = state.pageSize;
        $api.fetchPost(state.url, obj).then(res => {
            state.triggered = false;
            state.freshing = false;
            if (res.code == 10000) {
                state.listData = state.listData.concat(res.data[state.list]);
                if (res.data[state.list].length < 10) {
                    state.loadStatus = 'noMore';
                }
            } else {
                Toast(res.msg);
            }
        }).catch(err => {
            console.log(err);
            state.loadStatus = 'noMore';
            state.triggered = false;
            state.freshing = false;
        });
    };

    const loadList = () => {
        state.page = 1;
        state.listData = [];
        state.loadStatus = 'more';
        state.freshing = false;
        setTimeout(() => {
            state.triggered = true;
        }, 100);
    };

    // 上拉加载
    const loadMoreLow = () => {
        state.page++;
        if (state.loadStatus != 'noMore') {
            state.loadStatus = 'loading';
            getList();
        }
    };

    // 上拉刷新
    const onPulling = (e) => {
        // console.log("onpulling", e);
    };

    const onRefresh = () => {
        if (state.freshing) return;
        state.freshing = true;
        state.triggered = true;
        state.page = 1;
        state.listData = [];
        state.loadStatus = 'more';
        getList();
    };

    const onRestore = () => {
        state.triggered = 'restore'; // 需要重置
        // console.log("onRestore");
    };

    const onAbort = () => {
        // console.log("onAbort");
    };

    onMounted(() => {
        // 初始化
        loadList();
    });


</script>

<style lang="less" scoped>
    .load-more-list {
        width: 100%;
        height: 100%;
    }
</style>
